<!DOCTYPE html>
<html>
<head>
    <title>Canvas绘制具有圆角的矩形</title>
</head>
<body>
    <canvas id="myCanvas" width="150" height="40"></canvas>

    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        var width = 150;
        var height = 40;
        var cornerRadius = 10;

        // 添加阴影效果
        ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
        ctx.shadowBlur = 1;
        // ctx.shadowOffsetX = 2;
        // ctx.shadowOffsetY = 2;

        ctx.beginPath();
        ctx.moveTo(cornerRadius, 0);
        ctx.lineTo(width - cornerRadius, 0);
        ctx.arcTo(width, 0, width, cornerRadius, cornerRadius);
        ctx.lineTo(width, height - cornerRadius);
        ctx.arcTo(width, height, width - cornerRadius, height, cornerRadius);
        ctx.lineTo(cornerRadius, height);
        ctx.arcTo(0, height, 0, height - cornerRadius, cornerRadius);
        ctx.lineTo(0, cornerRadius);
        ctx.arcTo(0, 0, cornerRadius, 0, cornerRadius);

        ctx.fillStyle = 'white';
        ctx.fill();
    </script>
</body>
</html>